appMenu: Clip app icon when the button is active

We now use a border image on active panel buttons to underline the
button's content. As the property does not affect the content's
allocation, the app icon ends up being drawn on top of the border
image. To prevent this, use a custom property to clip the bottom of
the app icon when the button is active.

https://bugzilla.gnome.org/show_bug.cgi?id=642697

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4cb71aa898fcbc84a2954fd8a286ccee599579fc..08f636f509def3035245067a617848ff46478f44 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -204,6 +204,12 @@ StTooltip StLabel {
     spacing: 4px;
 }
 
+.panel-button:active #appMenuIcon,
+.panel-button:checked #appMenuIcon,
+.panel-button:focus #appMenuIcon {
+    app-icon-bottom-clip: 2px;
+}
+
 .app-menu-icon {
     width: 24px;
     height: 24px;

diff --git a/js/ui/panel.js b/js/ui/panel.js
index 550ec2e877bb9248fd86d3d23d684167a8a2e807..2b315993d51536f66697c37bab47c7973e25f3e8 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -210,6 +210,8 @@ AppMenuButton.prototype = {
         this._container.connect('allocate', Lang.bind(this, this._contentAllocate));
 
         this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
+        this._iconBox.connect('style-changed',
+                              Lang.bind(this, this._onIconBoxStyleChanged));
         this._container.add_actor(this._iconBox);
         this._label = new TextShadower();
         this._container.add_actor(this._label.actor);
@@ -280,6 +282,17 @@ AppMenuButton.prototype = {
                            onCompleteScope: this });
     },
 
+    _onIconBoxStyleChanged: function() {
+        let node = this._iconBox.get_theme_node();
+        let bottomClip = node.get_length('app-icon-bottom-clip');
+        if (bottomClip > 0)
+            this._iconBox.set_clip(0, 0,
+                                   this._iconBox.width,
+                                   this._iconBox.height - bottomClip);
+        else
+            this._iconBox.remove_clip();
+    },
+
     _stopAnimation: function(animate) {
         this._label.actor.remove_clip();
         if (this._updateId) {